<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>
            {{firstName}}
        </h1>
        <h2>
            {{lastName}}
        </h2>
       <h1>
            {{fullName}}
       </h1>

       <h4>{{myName}}</h4>
    </div>
</body>
<script>
    // 和methods相比用计算属性是因为他有缓存机制，效率更高，调试方便
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
           firstName:'张',
           lastName:'三'
        },
        computed:{
            // 这是完整写法
            fullName:{
                // get是当有人初次fullName就会调用get，或者用到的数据有变化时会调用get,返回值就是fullName的值
                get(){
                    return this.firstName+this.lastName;
                },
                // 当fullName被修改时被调用
                set(value){
                    // value是修改了的值，怎么处理看你
                    this.firstName = value[0]
                    this.lastName = value[1]
                }
            },
            // 如果你的计算属性只读不写，你可以简写一下,这个函数和get函数一样
            myName(){
                return this.firstName+this.lastName;
            }
        }
    })
</script>
</html>